<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>游戏列表</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="Portal - Bootstrap 5 Admin Dashboard Template For Developers">
    <meta name="author" content="Xiaoying Riley at 3rd Wave Media">
    <link rel="shortcut icon" href="favicon.ico">

    <script defer src="/assets/js/jquery-2.1.4.js"></script>
    <!-- FontAwesome JS-->
    <script defer src="/assets/plugins/fontawesome/js/all.min.js"></script>

    <!-- App CSS -->
    <link id="theme-style" rel="stylesheet" href="/assets/css/portal.css">

</head>

<input id="uid" style="display: none" type="number" th:value="${user.getUid()}">
<body class="app">
<header th:replace="template.html::header"></header><!--//app-header-->

<div class="app-wrapper">

    <div class="app-content pt-3 p-md-3 p-lg-4">
        <div class="container-xl">
            <div class="row g-3 mb-4 align-items-center justify-content-between">
                <div class="col-auto">
                    <h1 class="app-page-title mb-0">游戏列表</h1>
                </div>
            </div><!--//row-->

            <div class="tab-content" id="orders-table-tab-content">
                <div class="tab-pane fade show active" id="orders-all" role="tabpanel" aria-labelledby="orders-all-tab">
                    <div class="app-card app-card-orders-table shadow-sm mb-5">
                        <div class="app-card-body">
                            <div class="table-responsive">
                                <table class="table app-table-hover mb-0 text-left">
                                    <thead>
                                    <tr>
                                        <th class="cell">游戏号</th>
                                        <th class="cell">房主名字</th>
                                        <th class="cell">剧本名</th>
                                        <th class="cell">房间号</th>
                                        <th class="cell">开始时间</th>
                                        <th class="cell">房间人数</th>
                                        <th class="cell"></th>
                                        <th class="cell"></th>
                                        <th th:if="${user.getPerm().equals('admin')}" class="cell"></th>
                                    </tr>
                                    </thead>
                                    <tbody id="list">
                                    <tr th:each="game : ${games}"
                                        th:style="${gameStat.index < 12 ? '' : 'display: none'}">
                                        <td class="cell" th:text="${game.getGid()}"></td>
                                        <td class="cell" th:text="${names.get(gameStat.index)}"></td>
                                        <td class="cell">
                                            <span class="truncate"
                                                  th:text="${scripts.get(gameStat.index).getName()}">
                                            </span>
                                        </td>
                                        <td class="cell" th:text="${game.getHid()}"></td>
                                        <td class="cell"
                                            th:text="${#dates.format(game.getStart(), 'yyyy-MM-dd HH:mm:ss')}"></td>
                                        <td class="cell"
                                            th:text="${game.getPeople()} + ' / ' + ${scripts.get(gameStat.index).getPeople()} + '人'"></td>
                                        <td class="cell">
                                            <a class="btn-sm app-btn-secondary"
                                               th:href="'/ms/game?gid=' + ${game.getGid()}">
                                                查看游戏
                                            </a>
                                        </td>
                                        <td th:unless="${user.getPerm().equals('admin')}" class="cell">
                                            <a class="btn-sm app-btn-secondary" style="cursor: pointer"
                                               th:onclick="'joinGame(' + ${game.getGid()} + ')'">
                                                加入游戏
                                            </a>
                                        </td>
                                        <td th:if="${user.getPerm().equals('admin')}" class="cell">
                                            <a class="btn-sm app-btn-secondary" style="cursor: pointer"
                                               th:onclick="'deleteGame(' + ${game.getGid()} + ')'">
                                                删除
                                            </a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div><!--//table-responsive-->

                        </div><!--//app-card-body-->
                    </div><!--//app-card-->
                    <nav class="app-pagination">
                        <ul class="pagination justify-content-center" id="pager"></ul>
                    </nav><!--//app-pagination-->
                </div><!--//tab-pane-->
            </div><!--//tab-content-->
        </div><!--//container-fluid-->
    </div><!--//app-content-->

</div><!--//app-wrapper-->


<!-- Javascript -->
<script src="/assets/plugins/popper.min.js"></script>
<script src="/assets/plugins/bootstrap/js/bootstrap.min.js"></script>

<!-- Page Specific JS -->
<script src="/assets/js/app.js"></script>
<script type="text/javascript">
    function deleteGame(gid) {
        $.ajax({
            url: '/ms/api/game/' + gid,
            method: 'delete',
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                if (result['success']) location.reload()
                else alert('删除失败')
            }
        })
    }

    function joinGame(gid) {
        var participant = {}
        participant['uid'] = parseInt(document.getElementById('uid').value)
        participant['gid'] = gid
        $.ajax({
            url: '/ms/api/participant',
            method: 'post',
            data: JSON.stringify(participant),
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                if (result['success']) location.reload()
                else alert('加入游戏失败！可能原因：人数已满或您以及加入该游戏')
            }
        })
    }
</script>
</body>
</html> 
